<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统APP</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="../../js/verify.js"></script>
    
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../../css/orderdetail.css" />
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/mobiscroll.custom.min.css" />
</head>

<body>
    <div id="container" class="orderdetail">
        <div class="orderdetail_01">
            <!--主屏内容-->
            <div class="orderdetail_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="../../images/back.svg" alt="">
                    </a>
                    <span class="tit">工单管理</span>
                </div>

                <div class="tit_con">
                    <img src="../../images/orderbg.svg" alt="">
                    <div class="con_position">
                        <div class="toppart">
                            <div class="pleft floatpart">
                                工单编号：<span>1021</span>
                            </div>
                            <div class="pright floatpart">
                                进行中
                            </div>
                        </div>
                        <ul class="bottompart">
                            <li>
                                <span class="lileft">指派人：</span><span class="liright">申政栋</span>
                            </li>
                            <li>
                                <span class="lileft">派发时间：</span><span class="liright">2019-10-11 16:51:00</span>
                            </li>
                            <li>
                                <span class="lileft">当前执行人：</span><span class="liright">谢滢聪</span>
                            </li>
                            <li>
                                <span class="lileft">工单名称：</span><span class="liright">XXXXXXXX</span>
                            </li>
                            <li>
                                <span class="lileft">工单类型：</span><span class="liright">告警工单</span>
                            </li>
                            <li>
                                <span class="lileft">所属项目：</span><span class="liright">深中通道搅拌站500KWM</span>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="gj_tit title">告警项</div>
                <ul class="gj_con">
                    <li>
                        <span class="lileft">告警项</span><span class="liright">XXXXXXXX</span>
                    </li>
                    <li>
                        <span class="lileft">告警时间</span><span class="liright">XXXXXXXX</span>
                    </li>
                    <li>
                        <span class="lileft">告警项</span><span class="liright">XXXXXXXX</span>
                    </li>
                    <li>
                        <span class="lileft">告警等级</span><span class="liright">XXXXXXXX</span>
                    </li>
                    <li>
                        <span class="lileft">告警详情</span><span class="liright">XXXXXXXX</span>
                    </li>
                    <li>
                        <span class="lileft">告警解除时间</span><span class="liright">XXXXXXXX</span>
                    </li>
                    <li>
                        <span class="lileft">处理建议</span><span class="liright">XXXXXXXX</span>
                    </li>
                </ul>
                
                <ul class="gj_con" style="margin-top:0.3rem;">
                    <li onclick="window.location.href='./orderreceipt.html'">
                        <span class="lileft">处理回单1</span><span class="liright"><img src="../../images/arrowsr.svg"
                                alt=""></span>
                    </li>
                    <li onclick="window.location.href='./orderreceipt.html'">
                        <span class="lileft">处理回单2</span><span class="liright"><img src="../../images/arrowsr.svg"
                                alt=""></span>
                    </li>
                </ul>

                <div class="hdnr_tit title">回单内容</div>
                <div class="cljg hdnr_con">
                    <div class="cljg_tit tit">处理结果</div>
                    <textarea name="" id="" placeholder="请输入处理结果"></textarea>
                </div>

                <div class="clcs hdnr_con">
                    <div class="clcs_tit tit">处理措施</div>
                    <textarea name="" id="" placeholder="请输入处理措施"></textarea>
                </div>

                <!-- 上传文件 -->
                <div class="hdnr_tit title">上传附件</div>
                <div class="layui-upload" style="margin-top:0.4rem;">
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>

                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                    <button type="button" class="layui-btn" id="testListAction" style="font-size:0.24rem;">开始上传</button>

                </div>

                <div class="hdnr_tit title">工单处理</div>
                <div class="orderdeal">
                    <input type="radio" name="deal" id="to_next" />
                    <label for="to_next">指派下一个处理人</label>
                    <input type="radio" name="deal" id="sub_end" />
                    <label for="sub_end">提交工单完结</label>
                </div>
                <div id="dealer" style="display:none;">
                    <select name="" id="">
                        <option value="">处理人1</option>
                        <option value="">处理人2</option>
                        <option value="">处理人3</option>
                        <option value="">处理人4</option>
                        <option value="">处理人5</option>
                    </select>
                </div>
                <div id="ender" style="display:none;color:#7F94B2;">
                    完结审核人
                </div>


                <div class="wrap_btn">
                    <div class="sub_btn" style="margin-top:1rem;">提 交</div>
                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/mobiscroll.custom.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script>
        $(document).ready(function () {
            layui.use('upload', function(){
                var $ = layui.jquery
                ,upload = layui.upload;

                var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                    elem: '#testList'
                    // ,url: 'https://httpbin.org/post' //改成您自己的上传接口
                    ,url: 'http://112.74.169.99:21021/api/FileUpload/GatherImageUploadPost' //改成您自己的上传接口
                    ,accept: 'file'
                    ,multiple: true
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        
                        //读取本地文件
                        obj.preview(function(index, file, result){
                            var tr = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+ file.name +'</td>'
                                ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                                ,'<td>等待上传</td>'
                                ,'<td>'
                                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                    ,'</td>'
                                ,'</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function(){
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function(){
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            demoListView.append(tr);
                        });
                    }
                    ,done: function(res, index, upload){
                        var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;" judge="done">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                    }
                    ,error: function(index, upload){
                        var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;" judge="failure">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });

                // 单选框选中事件
                $('input:radio[name="deal"]').change(function () {
                    if ($("#to_next").is(":checked")) {
                        $("#dealer").show();
                        $("#ender").hide();
                    }
                    if ($("#sub_end").is(":checked")) {
                        $("#ender").show();
                        $("#dealer").hide();
                    }
                })
                
                var getid = getQueryString('id');

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    // url: "http://112.74.169.99:21021/api/services/app/AlarmService/GetAlarmInfoById?id=" +
                    //     getid,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept",
                            "application/json, text/javascript, */*; q=0.01"
                        );
                        xhr.setRequestHeader("Authorization", accessToken);
                        xhr.setRequestHeader('.AspNetCore.Culture',
                            'zh-Hans');
                    },
                    success: function (res) {
                        console.log("请求成功");
                        var data = res.result;
                        // console.log(data)

                        // 页面题目
                        $("#con_tit").html(` `);
                        $("#con_tit").html(data.devname);

                        // 设备名称
                        $("#devname").html(` `);
                        $("#devname").html(data.devname);

                        // 所属项目
                        $("#belonepj").html(` `);
                        $("#belonepj").html("所属项目名称");

                        // 设备告警项
                        $("#devwarn").html(` `);
                        $("#devwarn").html(data.remark1);

                        if (data.alarmstate == 1) {
                            data.alarmstate = "已解除";
                        } else {
                            data.alarmstate = "告警中";
                        }
                        // 设备状态
                        $("#devstatus").html(` `);
                        $("#devstatus").html(data.alarmstate);


                        var alarmtimearr = data.alarmtime.split('T');
                        // 告警时间
                        $("#warnstart").html(` `);
                        $("#warnstart").html(alarmtimearr[0] + '  ' + alarmtimearr[1]);



                        // 告警时间
                        if (data.alarmstate == '已解除') {
                            var stopobj = `
                            <div class="datalista">
                                <span class="dataleft">告警结束时间</span>
                                <span class="dataright" id="warnstop">告警结束时间</span>
                            </div>
                            `;
                            $("#listdata").append(stopobj);
                            var solvetimearr = data.alarmtime.split('T');
                            $("#warnstop").html(` `);
                            $("#warnstop").html(solvetimearr[0] + '  ' + solvetimearr[1]);
                        }
                    },
                    error: function (err) {
                        console.log("请求失败");
                    }
                });

                function getQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                }
            });




        });
    </script>

</body>

</html>